<template>
  <view
    class="coupon-item"
    :class="{ invalid: type === 1 }"
    @click="onClickItem"
  >
    <view class="top-icon"></view>
    <view class="bottom-icon"></view>
    <view class="content">
      <view class="left">
        <view class="top-box">
          <text class="title">{{ item.coupon_name }}</text>
          <text class="time">有效期至 {{ item.deadline }}</text>
        </view>
        <text class="coupon-type">支持全国门店使用</text>
      </view>
      <view class="status" v-if="type === 1"
        ><text>{{ item.status === 0 ? '已失效' : '已使用' }}</text></view
      >
      <view class="right">
        <text class="amount"
          ><text class="b">{{ item.cost_price | formatNum(this) }}</text
          >{{ item.cost_price | formatUnit(this) }}</text
        >
        <!-- <text class="label" v-if="showDetailsText">查看详情</text> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    showDetailsText: {
      type: Boolean,
      default: true,
    },
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    type: {
      type: Number,
      default: 0,
    },
  },
  created() {},
  filters: {
    // 格式化单位
    formatUnit(data, self) {
      if (!data) return ''
      let res = self.numberFormat(data)
      return res.unit
    },
    // 格式化金额
    formatNum(data, self) {
      if (!data) return ''
      let res = self.numberFormat(data)
      return res.value
    },
  },
  methods: {
    // 格式化金额
    numberFormat(value) {
      let param = {}
      let k = 10000
      let sizes = ['元', '万', '亿', '万亿']
      let i
      if (!value) return ''
      if (value < k) {
        param.value = value
        param.unit = '元'
      } else {
        i = Math.floor(Math.log(value) / Math.log(k))
        param.value = (value / Math.pow(k, i)).toFixed(2)
        param.unit = sizes[i]
      }
      return param
    },
    onClickItem() {
      this.$emit('click', { data: this.item, type: 1 })
    },
  },
}
</script>

<style lang="scss" scoped>
.coupon-item {
  margin: 40rpx 26rpx;
  position: relative;
  height: 216rpx;
  background-color: #fff;
  box-shadow: 0 0 10rpx 0 rgba(160, 160, 160, 0.35);
  border-radius: 10rpx;
  &:first-child {
    margin-top: 20rpx;
  }
  &::before {
    content: '';
    width: 0;
    height: 156rpx;
    position: absolute;
    right: 192rpx;
    top: 30rpx;
    border-left: 2rpx dashed #c7c7c7;
  }
  &::after {
    content: '';
    height: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 8rpx solid #ffd921;
    border-radius: 0 0 10rpx 10rpx;
    z-index: 1;
  }
  .top-icon::before,
  .bottom-icon::before {
    position: absolute;
    content: '';
    right: 172rpx;
    width: 40rpx;
    padding: 20rpx 0;
    border-radius: 50%;
    box-shadow: 0 0 10rpx 0 rgba(160, 160, 160, 0.35) inset;
    background-color: #f6f6f6;
    z-index: 2;
  }
  .top-icon::before {
    top: -20rpx;
  }
  .bottom-icon::before {
    bottom: -20rpx;
  }
  .top-icon::after,
  .bottom-icon::after {
    position: absolute;
    right: 172rpx;
    content: '';
    height: 20rpx;
    width: 40rpx;
    background-color: #f5f5f5;
    z-index: 3;
  }
  .top-icon::after {
    top: -22rpx;
  }
  .bottom-icon::after {
    bottom: -22rpx;
  }
  .content {
    height: 216rpx;
    display: flex;
    align-items: center;
    .left {
      flex: 1;
      padding: 30rpx 40rpx;
      height: 216rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top-box {
        display: flex;
        flex-direction: column;
        .title {
          font-size: 36rpx;
          color: #333;
        }
        .time {
          font-size: 24rpx;
          color: #999;
          margin-top: 10rpx;
        }
      }
      .coupon-type {
        font-size: 28rpx;
        color: #ff9813;
      }
    }
    .status {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #999;
      margin-right: 50rpx;
    }
    .right {
      width: 192rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .amount {
        color: #f1635b;
        font-size: 28rpx;
        .b {
          font-weight: bold;
          font-size: 68rpx;
        }
      }
      .label {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  &.invalid {
    &::after {
      content: '';
      height: 0;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      border-bottom: 8rpx solid #bbb;
      border-radius: 0 0 10rpx 10rpx;
      z-index: 1;
    }
    .content {
      .left {
        .top-box {
          .title {
            color: #999;
          }
        }
        .coupon-type {
          color: #999;
        }
      }
      .right {
        .amount {
          color: #999;
        }
      }
    }
  }
}
</style>
